<template>
  <div class="home">
    <div class="top-navigator">
      <div class="top-nav-left">
        <div class="top-nav-logo">
          <a href="http://www.chatpet.top" target="_blank">
            <img src="@/assets/img/chatpet.png">
          </a>
        </div>
        <div class="top-nav-title"><span style="color: #C689FF">Chat</span><span style="color: #ADDFFF">Pet</span></div>
      </div>
      <div class="top-nav-right">
        <div class="top-nav-search">
          <el-input
              v-model="input2"
              style="width: 300px;"
              placeholder="Type something"
              :prefix-icon="Search"
          />
        </div>
        <div class="top-nav-tools">
          <div class="tool-item">
            <el-icon :size="15"><Bell /></el-icon>
          </div>
          <div class="tool-item">
            <el-icon :size="15"><Service /></el-icon>
          </div>
          <div class="tool-item">
            <el-icon :size="15"><Present /></el-icon>
          </div>
          <div class="tool-item" @click="changeTheme">
            <el-icon :size="15" v-if="chatPetTheme==='dayTheme'"><Moon /></el-icon>
            <el-icon :size="15" v-else><Sunny /></el-icon>
          </div>
          <div class="tool-item">
            <el-icon :size="15"><SwitchButton /></el-icon>
          </div>
        </div>
        <div class="top-nav-user">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="43"/>
          <div style="margin-left: 10px">TestUser</div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="navigator">
        <div class="nav-choose-part">
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706110950" class="icon" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19045" width="25" height="25"><path d="M993.886268 442.729412V963.764706a60.235294 60.235294 0 0 1-60.235294 60.235294h-231.755294a60.235294 60.235294 0 0 1-60.235294-60.235294v-241.664h-176.609882V963.764706a60.235294 60.235294 0 0 1-60.235295 60.235294H180.709798a60.235294 60.235294 0 0 1-60.235294-60.235294V445.44l-70.987295 59.512471a30.117647 30.117647 0 1 1-38.731294-46.140236l538.744471-451.764706a30.117647 30.117647 0 0 1 39.183059 0.421647l515.403294 451.764706a30.117647 30.117647 0 0 1-39.695059 45.296942L993.886268 442.729412z m-60.205176-52.766118L568.414268 69.812706 180.709798 394.872471V963.764706h224.105411v-241.664a60.235294 60.235294 0 0 1 60.235295-60.235294h176.609882a60.235294 60.235294 0 0 1 60.235294 60.235294V963.764706H933.650974V391.529412l0.030118-1.566118z"  p-id="19046"></path></svg>
              <div class="nav-title">首页</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713705461119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13592" width="25" height="25"><path d="M752 848a16 16 0 0 1 16 16v64a16 16 0 0 1-16 16H288a16 16 0 0 1-16-16v-64a16 16 0 0 1 16-16h464zM896 96a64 64 0 0 1 63.936 60.8L960 160V704a64 64 0 0 1-60.8 63.936L896 768H144a64 64 0 0 1-63.936-60.8L80 704V160a64 64 0 0 1 60.8-63.936l3.2-0.064H896zM864 192H176v480H864V192zM448 320v240H352V320H448z m240 0v240h-96V320h96z" p-id="13593"></path></svg>
              <div class="nav-title">AI聊天</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713705625106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16791" width="25" height="25"><path d="M629.587976 999.854781l-86.169047-76.26823a49.567962 49.567962 0 0 0-31.93812-11.050589 49.120828 49.120828 0 0 0-31.93812 10.922837l-85.977419 76.651487a88.532468 88.532468 0 0 1-59.085521 22.228932 88.532468 88.532468 0 0 1-59.085522-22.228932l-86.169048-76.26823a48.673695 48.673695 0 0 0-31.93812-11.050589 49.120828 49.120828 0 0 0-31.938119 10.922837l-85.977419 76.651487a20.504273 20.504273 0 0 1-13.605639 5.557233 24.081342 24.081342 0 0 1-20.440397-14.499906 42.988709 42.988709 0 0 1 6.770881-49.248581l61.896077-54.86969-0.830391-1.469154-33.662779-69.30572a49.95122 49.95122 0 0 1 4.471337-57.488616v-0.383257a66.942299 66.942299 0 0 1 48.737571-22.93157l830.391117-32.576882a29.702452 29.702452 0 0 1 3.57707 0 63.429106 63.429106 0 0 1 59.085521 34.748674 51.739754 51.739754 0 0 1-22.356683 65.728651l-53.847671 51.548125a87.893706 87.893706 0 0 1 14.947041 10.603456l85.977418 76.651488a42.988709 42.988709 0 0 1 6.96251 49.248581 24.272971 24.272971 0 0 1-20.568149 14.499906 20.440397 20.440397 0 0 1-13.41401-5.557233l-85.977419-76.26823a49.631838 49.631838 0 0 0-31.93812-11.05059 49.120828 49.120828 0 0 0-31.93812 10.922837l-85.977418 76.651488a89.426736 89.426736 0 0 1-59.277151 22.228932 88.34084 88.34084 0 0 1-58.766141-23.250952z m-59.085521-134.587237l86.2968 76.651488a48.545942 48.545942 0 0 0 31.938119 11.114466 48.801447 48.801447 0 0 0 31.93812-11.114466l86.105172-76.651488 0.958143-0.958143 101.179964-97.091885-806.693032 31.93812 24.272971 49.567962a90.193251 90.193251 0 0 1 30.852224-5.365604 88.85185 88.85185 0 0 1 58.893893 22.037303l86.2968 76.651487a48.545942 48.545942 0 0 0 31.93812 11.114466 48.41819 48.41819 0 0 0 31.93812-11.114466l86.169047-76.651487a89.426736 89.426736 0 0 1 59.085522-22.037303 89.426736 89.426736 0 0 1 58.76614 21.90955zM80.763324 638.570769l-2.682802-0.383257-12.775248-11.689352-0.383257-2.299545a22.356684 22.356684 0 0 1 2.171792-13.605639l0.383257-0.574886 46.565779-56.785977a413.726405 413.726405 0 0 0 58.893893-269.302227 641.253571 641.253571 0 0 0-59.660408-180.130996 254.546816 254.546816 0 0 0-13.92502-21.654046C83.957136 59.404903 66.199542 33.407273 71.054136 11.880981V10.731208l0.702638-1.085896a21.462417 21.462417 0 0 1 17.757595-9.453683h1.405277l1.405278 0.383257a518.29181 518.29181 0 0 1 158.349198 78.248394 871.271911 871.271911 0 0 1 314.590481 316.953902 641.061942 641.061942 0 0 1 62.470962 143.274406c0.702639 2.682802 1.980163 5.876614 3.06606 9.325931a75.118458 75.118458 0 0 1 6.387624 49.951219 20.823654 20.823654 0 0 1-11.944857 12.328114l-2.363421 1.085896-2.491173-0.383257a270.132618 270.132618 0 0 1-68.411453-19.865511 580.698896 580.698896 0 0 0-176.553927-27.275154c-19.546129 0-39.220011 0.958144-58.574512 2.874431a721.034995 721.034995 0 0 0-152.53646 38.006362 222.672572 222.672572 0 0 0-23.123199 12.328115 122.64238 122.64238 0 0 1-54.933566 21.654045c-2.299545-0.255505-3.896451-0.255505-5.557233-0.255505z m154.899882-365.499844l0.383257 2.874431a470.256877 470.256877 0 0 1-36.34558 250.139355 751.120704 751.120704 0 0 1 108.142474-22.42056l2.299544-0.383258c21.654045-2.107916 43.499719-3.193812 64.834384-3.193812a650.068492 650.068492 0 0 1 181.216892 25.550496 587.214272 587.214272 0 0 0-46.054769-98.113904l-0.51101-0.958144a809.248082 809.248082 0 0 0-291.658911-293.447445l-2.682802-1.405278-2.363421-1.788534a444.514753 444.514753 0 0 0-25.103362-17.054956 703.660657 703.660657 0 0 1 47.779427 160.201609z m695.676127 358.0902l-1.980163-1.085896a629.947477 629.947477 0 0 0-184.091323-72.180151 31.93812 31.93812 0 0 1-24.336848-24.592352 634.546566 634.546566 0 0 0-308.011228-426.884911 31.93812 31.93812 0 0 1-14.372154-39.028382 31.93812 31.93812 0 0 1 36.537209-19.993263 701.169484 701.169484 0 0 1 541.670514 548.633023 32.321377 32.321377 0 0 1-11.306095 31.363234 31.93812 31.93812 0 0 1-20.057139 7.090263 30.788348 30.788348 0 0 1-14.116649-3.257688z m-152.344832-130.946291a697.528538 697.528538 0 0 1 117.979415 41.264051 637.804254 637.804254 0 0 0-285.079658-357.706943 708.323623 708.323623 0 0 1 167.036367 316.506768z" p-id="16792"></path></svg>
              <div class="nav-title">AI绘画</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706023942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18012" width="25" height="25"><path d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z"  p-id="18013"></path></svg>
              <div class="nav-title">绘画精选</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706186296" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20191" width="25" height="25"><path d="M608 416h288c35.36 0 64 28.48 64 64v416c0 35.36-28.48 64-64 64H480c-35.36 0-64-28.48-64-64v-288H128c-35.36 0-64-28.48-64-64V128c0-35.36 28.48-64 64-64h416c35.36 0 64 28.48 64 64v288z m0 64v64c0 35.36-28.48 64-64 64h-64v256.032c0 17.664 14.304 31.968 31.968 31.968H864a31.968 31.968 0 0 0 31.968-31.968V512a31.968 31.968 0 0 0-31.968-31.968H608zM128 159.968V512c0 17.664 14.304 31.968 31.968 31.968H512a31.968 31.968 0 0 0 31.968-31.968V160A31.968 31.968 0 0 0 512.032 128H160A31.968 31.968 0 0 0 128 159.968z m64 244.288V243.36h112.736V176h46.752c6.4 0.928 9.632 1.824 9.632 2.752a10.56 10.56 0 0 1-1.376 4.128c-2.752 7.328-4.128 16.032-4.128 26.112v34.368h119.648v156.768h-50.88v-20.64h-68.768v118.272H306.112v-118.272H238.752v24.768H192z m46.72-122.368v60.48h67.392V281.92H238.752z m185.664 60.48V281.92h-68.768v60.48h68.768z m203.84 488H576L668.128 576h64.64l89.344 254.4h-54.976l-19.264-53.664h-100.384l-19.232 53.632z m33.024-96.256h72.864l-34.368-108.608h-1.376l-37.12 108.608zM896 320h-64a128 128 0 0 0-128-128V128a192 192 0 0 1 192 192zM128 704h64a128 128 0 0 0 128 128v64a192 192 0 0 1-192-192z" p-id="20192"></path></svg>
              <div class="nav-title">AI翻译</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706421669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24589" width="25" height="25"><path d="M848.713426 537.004651c-20.837209 0-38.697674 16.876155-38.697674 38.705613v371.100775H76.744434V213.531783h400.868217c20.837209 0 38.697674-16.868217 38.697675-38.697674s-16.868217-38.697674-38.697675-38.697675h-400.868217c-42.666667 0-76.403101 34.728682-76.403101 76.403101v733.271318c0 42.666667 34.728682 76.403101 76.403101 76.4031h733.271318c42.666667 0 76.403101-34.728682 76.403101-76.4031V574.710078c0.992248-20.837209-16.868217-37.705426-37.705427-37.705427z" p-id="24590"></path><path d="M1000.52738 107.369178L916.186295 23.020155c-29.767442-29.767442-78.387597-29.767442-109.147287 0l-422.697675 422.697674c-2.976744 2.976744-5.953488 6.945736-6.945736 10.914729l-107.162791 251.03876c-5.953488 13.891473-1.984496 27.782946 6.945737 37.705426s23.813953 12.899225 37.705426 6.945737L565.922729 646.151938c3.968992-1.984496 7.937984-3.968992 10.914728-6.945736l423.689923-423.689923c29.767442-29.767442 29.767442-78.387597 0-108.155039zM528.217302 578.67907l-146.852713 62.511628 62.511628-146.852714L740.558388 197.655814l84.341085 84.341085L528.217302 578.67907z m417.736434-417.736434l-66.48062 66.48062-84.341085-84.341085 66.48062-66.480621 84.341085 84.341086z" p-id="24591"></path></svg>
              <div class="nav-title">AI写作</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706318117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23425" width="25" height="25"><path d="M872.181356 234.260867h-68.845026v-87.332299c0-46.260163-37.630857-83.892044-83.892044-83.892044H299.987137c-46.260163 0-83.892044 37.630857-83.892044 83.892044v87.332299h-68.845025c-45.332523 0-82.226183 36.89366-82.226183 82.252803v324.916698c0 45.332523 36.89366 82.226183 82.226183 82.226182h68.845025v150.251076c0 46.260163 37.630857 83.892044 83.892044 83.892044h419.458173c46.260163 0 83.892044-37.630857 83.892044-83.892044V723.65655h68.845026c45.332523 0 82.226183-36.89366 82.226182-82.226182V316.514694c-0.001024-45.360168-36.894684-82.253828-82.227206-82.253827z m-600.158575-87.332299c0-15.428928 12.534404-27.964356 27.964356-27.964356h419.458173c15.428928 0 27.964356 12.534404 27.964356 27.964356v87.332299H272.022781v-87.332299z m475.385861 726.979058c0 15.428928-12.534404 27.963332-27.964356 27.963332H299.987137c-15.428928 0-27.964356-12.534404-27.964356-27.963332V588.698226H747.408642v285.2094z m151.071208-232.477258c0 14.501288-11.797207 26.298495-26.298494 26.298494h-68.845026V560.73387c0-15.456573-12.507783-27.963332-27.964356-27.963332H244.059449c-15.456573 0-27.964356 12.506759-27.964356 27.963332v106.994992h-68.845025c-14.501288 0-26.298495-11.797207-26.298495-26.298494V316.514694c0-14.527909 11.797207-26.325116 26.298495-26.325115h724.930264c14.500264 0 26.298495 11.797207 26.298494 26.325115v324.915674z" p-id="23426"></path><path d="M792.050042 397.757947m-51.887436 0a51.887437 51.887437 0 1 0 103.774873 0 51.887437 51.887437 0 1 0-103.774873 0Z"  p-id="23427"></path></svg>
              <div class="nav-title">AI办公</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706527729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25721" width="25" height="25"><path d="M373.12 841.6c0-48.128-19.136-91.712-50.112-123.84L494.08 375.808a167.296 167.296 0 0 0 43.968 0l171.008 341.952a177.92 177.92 0 0 0-50.112 123.84 178.624 178.624 0 1 0 178.624-178.56c-7.488 0-14.72 0.64-22.016 1.344l-170.944-341.952a177.92 177.92 0 0 0 50.112-123.84 178.624 178.624 0 0 0-357.248 0c0 48.128 19.2 91.712 50.112 123.84l-171.008 341.952A178.624 178.624 0 1 0 373.12 841.6" p-id="25722"></path></svg>
              <div class="nav-title">思维导图</div>
            </div>
          </div>
          <div class="nav-item-content" >
            <div class="nav-item-body">
              <svg t="1713706786139" class="icon" viewBox="0 0 1204 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33104" width="25" height="25"><path d="M1153.927529 1024H50.718118A51.079529 51.079529 0 0 1 0 972.8V51.2C0 23.009882 22.768941 0 50.778353 0h1103.149176c28.009412 0 50.778353 23.009882 50.778353 51.2v921.6c0 28.190118-22.768941 51.2-50.778353 51.2zM192.512 91.196235H90.352941v119.808h102.159059V91.196235z m174.682353 0h-84.329412V211.004235h84.329412V91.196235z m174.622118 0h-84.329412v119.808h84.329412V91.196235z m572.53647 0h-482.243765v119.747765H1114.352941V91.196235z m0 210.944h-1024v630.66353h1024V302.140235zM253.771294 433.995294a45.176471 45.176471 0 0 1 61.921882 0l131.433412 126.494118a40.96 40.96 0 0 1 0 59.572706l-131.433412 126.554353a45.176471 45.176471 0 0 1-61.921882 0 41.080471 41.080471 0 0 1 0-59.632942L354.243765 590.305882 253.771294 493.628235a41.080471 41.080471 0 0 1 0-59.632941z m193.41553 126.494118v0.060235l-0.060236-0.060235h0.060236z m56.621176 198.475294H679.092706c24.395294 0.240941 43.971765 19.154824 43.730823 42.224941 0.180706 23.009882-19.395765 41.863529-43.791058 42.104471h-175.284706c-24.154353 0-43.791059-18.853647-43.791059-42.104471-0.240941-23.130353 19.395765-41.984 43.851294-42.224941z" p-id="33105"></path></svg>
              <div class="nav-title">AI编程</div>
            </div>
          </div>
        </div>
        <div class="nav-tool-part">
          <div style="width: 100%;display: flex;justify-content: center;">
            <div class="nav-divider"></div>
          </div>
          <div class="nav-item-content" style="margin-top: 20px;height: 40px">
            <div class="nav-item-body-tool">
              <svg t="1713707695942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36222" width="20" height="20"><path d="M148.72381 719.238095l-97.52381 156.038095c-4.87619 9.752381 0 21.942857 12.190476 21.942858l131.657143 7.314285c4.87619 0 7.314286 2.438095 9.752381 4.876191l80.457143 107.27619c7.314286 7.314286 19.504762 7.314286 24.380952 0l92.647619-153.6c4.87619-7.314286 2.438095-14.628571-4.87619-19.504762l-229.180953-129.219047c-7.314286-2.438095-14.628571 0-19.504761 4.87619zM875.27619 716.8l97.52381 156.038095c4.87619 9.752381 0 21.942857-12.190476 21.942857L828.952381 902.095238c-4.87619 0-7.314286 2.438095-9.752381 4.876191l-80.457143 107.27619c-7.314286 7.314286-19.504762 7.314286-24.380952 0l-92.647619-153.6c-4.87619-7.314286-2.438095-14.628571 4.87619-19.504762l229.180953-129.219047c7.314286-4.87619 14.628571-2.438095 19.504761 4.87619zM855.771429 185.295238L546.133333 9.752381c-21.942857-12.190476-51.2-12.190476-73.142857 0L165.790476 182.857143C143.847619 195.047619 129.219048 219.428571 129.219048 243.809524v348.647619c0 24.380952 14.628571 48.761905 36.571428 60.952381L475.428571 828.952381c21.942857 12.190476 51.2 12.190476 73.142858 0l307.2-170.666667c21.942857-12.190476 36.571429-36.571429 36.571428-60.952381V248.685714c0-26.819048-14.628571-51.2-36.571428-63.390476z m-146.285715 148.72381l-180.419047 260.87619c-4.87619 7.314286-14.628571 12.190476-24.380953 12.190476s-19.504762-4.87619-24.380952-12.190476l-173.104762-260.87619c-9.752381-12.190476-4.87619-31.695238 7.314286-39.009524 12.190476-7.314286 31.695238-4.87619 39.009524 7.314286l148.723809 224.304761 156.038095-226.742857c9.752381-12.190476 26.819048-17.066667 39.009524-7.314285 19.504762 12.190476 21.942857 29.257143 12.190476 41.447619z" fill="#F5B53A" p-id="36223"></path></svg>
              <div class="nav-title-tool">会员权益</div>
            </div>
          </div>
          <div class="nav-item-content" style="height: 40px">
            <div class="nav-item-body-tool">
              <svg t="1713708303670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="49810" width="20" height="20"><path d="M770.7 152.4h-96.6s-30.8 76-66.6 72.2H423.2c-35.9 3.8-66.6-72.2-66.6-72.2h-99.8c-54.3 0-98.7 45.5-98.7 101.2V827c0 55.7 44.4 101.2 98.7 101.2h514c54.2 0 98.5-45.3 98.7-100.8V253.1c-0.3-55.4-44.6-100.7-98.8-100.7z m-53.1 577.3H313.2c-14.9 0-26.9-12.1-26.9-27.1 0-15 12.1-27.1 26.9-27.1h404.4c14.9 0 27 12.1 27 27.1-0.1 15-12.1 27.1-27 27.1z m0-162.3H313.2c-14.9 0-26.9-12.1-26.9-27.1 0-15 12.1-27.1 26.9-27.1h404.4c14.9 0 27 12.1 27 27.1-0.1 14.9-12.1 27.1-27 27.1z m0-144.4H313.2c-14.9 0-26.9-12.1-26.9-27.1 0-15 12.1-27.1 26.9-27.1h404.4c14.9 0 27 12.1 27 27.1-0.1 15-12.1 27.1-27 27.1z" fill="#E92636" p-id="49811"></path><path d="M637.3 206.5H390.1c-0.5 0-0.9-0.4-0.9-0.9V99.1c0-0.5 0.4-0.9 0.9-0.9h247.2c0.5 0 0.9 0.4 0.9 0.9v106.4c0 0.6-0.4 1-0.9 1z" fill="#E92636" p-id="49812"></path></svg>
              <div class="nav-title-tool">订单信息</div>
            </div>
          </div>
          <div class="nav-item-content" style="height: 40px">
            <div class="nav-item-body-tool">
              <svg t="1713708015283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40885" width="20" height="20"><path d="M512.003 1024c-23.399141 0-46.798283-1.599941-69.997432-4.799824-32.298815-4.699828-58.997835-27.79898-68.197498-58.897839-23.599134-75.697223-103.096217-121.595539-180.993359-104.39617-30.898866 7.299732-64.097648-4.199846-84.096915-29.398921-29.098932-37.198635-52.798063-77.997138-70.59741-121.495542-12.199552-30.298888-5.599795-64.997615 16.599391-88.59675 26.199039-28.298962 40.698507-65.497597 40.598511-104.39617 0-38.998569-14.499468-76.097208-40.8985-104.596162-21.999193-23.399141-28.498954-58.097868-16.499394-88.196764 17.899343-43.698397 41.69847-84.4969 70.59741-121.495543 20.099263-25.399068 53.298045-36.898646 84.596896-29.598914 37.498624 8.399692 76.897179 2.399912 110.495946-17.099372 33.79876-19.499285 58.697846-50.598144 70.297421-87.796779 9.099666-30.698874 35.798687-53.69803 67.797512-58.397857 46.798283-6.499762 93.896555-6.399765 140.394849 0 32.298815 4.799824 58.897839 27.79898 68.197498 58.797842 11.399582 36.79865 36.398665 67.997505 70.197424 87.396794 33.698764 19.499285 72.997322 25.599061 110.895932 16.999376 30.898866-7.199736 64.097648 4.299842 84.096914 29.398921 29.098932 37.198635 52.798063 77.997138 70.59741 121.495543 12.199552 30.298888 5.699791 64.997615-16.499395 88.596749-53.898023 58.497854-53.898023 150.394482 0.199993 209.092329 21.999193 23.399141 28.498954 58.097868 16.399398 88.096768-17.899343 43.698397-41.598474 84.4969-70.497413 121.495542-20.199259 25.399068-53.398041 36.898646-84.696893 29.498918-37.398628-8.499688-76.897179-2.399912-110.395949 17.099372h-0.099997c-33.698764 19.399288-58.697846 50.598144-70.197424 87.796779-9.099666 30.598877-35.69869 53.598034-67.59752 58.397857-23.69913 3.399875-47.198268 4.999817-70.697406 4.999817z m-286.289496-243.091081c96.996441 0 186.793147 63.097685 216.492057 158.594181 1.499945 4.89982 5.299806 8.299695 9.899637 8.899674 39.698543 5.499798 80.297054 5.499798 120.295586 0 4.199846-0.599978 8.099703-3.999853 9.399655-8.399692 16.999376-54.797989 53.498037-100.496313 102.796229-128.895271 49.198195-28.498954 106.896078-37.298632 162.294045-24.899087 4.89982 1.199956 9.699644-0.499982 12.599538-4.199845 24.699094-31.598841 45.098345-66.697553 60.397784-104.096181 1.699938-4.199846 0.699974-9.199662-2.499908-12.599538-79.297091-86.096841-79.297091-220.49191-0.199993-306.388759 3.499872-3.699864 4.399839-8.699681 2.699901-13.099519-15.199442-37.198635-35.598694-72.297347-60.497781-104.096181-2.699901-3.399875-7.499725-5.099813-11.999559-3.999853-55.697956 12.499541-113.39584 3.699864-162.594035-24.79909-49.398188-28.398958-85.896848-73.997285-102.796228-128.495286-1.399949-4.89982-5.299806-8.199699-9.899637-8.899673-39.698543-5.499798-80.297054-5.499798-120.295586 0-4.299842 0.599978-8.199699 3.999853-9.499652 8.399691-16.999376 54.797989-53.498037 100.496313-102.896225 128.895271-49.098199 28.398958-106.696085 37.298632-162.194049 24.799091-4.89982-1.199956-9.699644 0.499982-12.499541 4.199845-24.79909 31.598841-45.198342 66.697553-60.497781 104.096181-1.699938 4.09985-0.699974 9.199662 2.499909 12.599538 38.898573 41.998459 60.197791 96.396463 60.097795 153.294376 0.099996 56.797916-21.199222 111.19592-59.797806 153.094383-3.399875 3.699864-4.399839 8.699681-2.599905 12.999523 15.199442 37.198635 35.598694 72.297347 60.49778 104.096181 2.699901 3.399875 7.599721 5.099813 12.099556 3.999853 16.099409-3.299879 32.498808-5.099813 48.698214-5.099813z m476.782507 61.097758h0.199992-0.199992z" fill="#27D0D8" p-id="40886"></path><path d="M512.003 714.411359c-111.595906 0-202.392574-90.796669-202.392574-202.392575 0-111.595906 90.796669-202.392574 202.392574-202.392574 111.595906 0 202.392574 90.796669 202.392574 202.392574 0 111.595906-90.796669 202.392574-202.392574 202.392575z m0-333.387769c-72.197351 0-130.995194 58.797843-130.995194 130.995194s58.797843 130.995194 130.995194 130.995194 130.995194-58.797843 130.995194-130.995194-58.797843-130.995194-130.995194-130.995194z" fill="#27D0D8" p-id="40887"></path></svg>
              <div class="nav-title-tool">页面设置</div>
            </div>
          </div>
          <div class="nav-item-content" style="height: 40px">
            <div class="nav-item-body-tool">
              <svg t="1713707970354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39839" width="20" height="20"><path d="M870.4 12.8H153.6A140.902 140.902 0 0 0 12.8 153.6v716.8a140.902 140.902 0 0 0 140.8 140.8h504.32a38.4 38.4 0 0 0 0-76.8H153.6c-35.277 0-64-28.723-64-64V153.6c0-35.277 28.723-64 64-64h716.8c35.277 0 64 28.723 64 64v716.8c0 35.277-28.723 64-64 64h-11.469a38.4 38.4 0 0 0 0 76.8H870.4a140.902 140.902 0 0 0 140.8-140.8V153.6A140.902 140.902 0 0 0 870.4 12.8z" fill="#24C899" p-id="39840"></path><path d="M243.558 294.4h389.888a38.4 38.4 0 0 0 0-76.8H243.558a38.4 38.4 0 0 0 0 76.8z m486.4 179.2H242.842a38.4 38.4 0 0 0 0 76.8h487.116a38.4 38.4 0 0 0 0-76.8z m-486.4 256a38.4 38.4 0 0 0 0 76.8h192.973a38.4 38.4 0 0 0 0-76.8H243.558z m541.543-512h-3.943c-21.196 0-36.403 17.203-36.403 38.4s19.2 38.4 40.397 38.4a38.4 38.4 0 1 0-0.051-76.8z" fill="#24C899" p-id="39841"></path></svg>
              <div class="nav-title-tool">调用日志</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <component :is="Component"></component>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { setTheme } from "@/theme/theme";

const router = useRouter();
const logo = ref('/images/logo.png');
const navs = ref([
  {path: "/chat", icon_path: "/images/chat.png", title: "对话聊天"},
  {path: "/mj", icon_path: "/images/mj.png", title: "MJ 绘画"},
  {path: "/sd", icon_path: "/images/sd.png", title: "SD 绘画"},
  {path: "/apps", icon: "menu", title: "应用中心"},
  {path: "/images-wall", icon: "image-list", title: "作品展示"},
  {path: "/powerLog", icon: "log", title: "消费日志"},
  {path: "/member", icon: "vip-user", title: "会员计划"},
  {path: "/invite", icon: "share", title: "推广计划"},
])
const curPath = ref(router.currentRoute.value.path);
const chatPetTheme = ref('');

const changeNav = (item) => {
  curPath.value = item.path
  router.push(item.path)
}

const changeTheme= ()=>{
  if(chatPetTheme.value==='dayTheme'){
    chatPetTheme.value='nightTheme';
  }else{
    chatPetTheme.value='dayTheme';
  }
  setTheme(chatPetTheme.value);
}

onMounted(() => {
  httpGet("/api/config/get?key=system").then(res => {
    logo.value = res.data['logo']
  }).catch(e => {
    ElMessage.error("获取系统配置失败：" + e.message)
  })

  chatPetTheme.value = localStorage.getItem('CHATPET_THEME');
  if(!chatPetTheme.value){
    chatPetTheme.value='dayTheme';
  }
  setTheme(chatPetTheme.value);
})
</script>
<style lang="less">
.top-navigator{
}
</style>

<style lang="stylus" scoped>
@import '@/assets/iconfont/iconfont.css';
.home {
  height 100vh
  width 100%

  .top-navigator{
    height 6vh;
    width 100%;
    background-color #ffffff;
    display flex;
    align-items center;
    border-bottom #F2F2F2 solid 1px;

    .top-nav-left{
      width 50%;
      display flex;
      justify-content left;
      align-items center;
      .top-nav-logo{
        width 80px;
        display flex;
        justify-content center;
      }

      .top-nav-logo img{
        width 40px;
        height auto;
      }

      .top-nav-title{
        font-size 25px;
        font-weight bold;
        letter-spacing 1px;
      }
    }

    .top-nav-right{
      width 50%;
      display flex;
      justify-content right;
      align-items center;

      .top-nav-search{
        margin-right 25px;
        /deep/.el-input__prefix{
          color #409eff;
          font-weight bold;
        }
      }

      .top-nav-user{
        width 180px;
        display flex;
        justify-content center;
        align-items center;
        font-size 15px;
        font-weight bold;
      }

      .top-nav-tools{
        width 240px;
        height 100%
        display flex;
        align-items color;
        justify-content: space-between;
        .tool-item{
          width 35px;
          height 30px;
          background-color #F4F5F5;
          display flex;
          align-items center;
          justify-content center;
          border-radius 6px;
          &:hover{
            background-color #EAEAEA
          }
        }
      }
    }
  }

  .main-content{
    height 94vh;
    width 100%;
    display flex;
    padding 10px 15px;
    box-sizing border-box;
    background-color #F2F0FE;
    .navigator {
      display flex
      flex-flow column
      width 200px
      padding 10px 10px
      border-radius 10px;
      border-right: 1px solid #F5F5F5
      background: linear-gradient(135deg, #D4DDFF 50%, #C6DEFE 100%);

      .nav-choose-part{
        width 100%;
        height 75%;
      }

      .nav-tool-part{
        width 100%;
        height 25%;
        .nav-divider{
          width 75%;
          height 0.7px;
          border-radius 50%;
          background-color #656767;
        }
      }

      .nav-item-content{
        width: 100%;
        height: 60px;
        display flex;
        align-items center;
        justify-content center;
        .nav-item-body{
          width 95%;
          height 80%;
          border-radius 10px;
          display flex;
          align-items center;
          &:hover{
            background-color #6A43DE;
            svg{
              fill #FFFFFF;
            }
            .nav-title{
              color #FFFFFF;
            }
          }
          svg{
            width 37%;
            fill #8a8a8a;
          }
          .nav-title{
            width 63%;
            font-weight bold;
            font-size 16.5px;
            color #656767;
          }
        }

        .nav-item-body-tool{
          width 95%;
          height 80%;
          border-radius 10px;
          display flex;
          align-items center;
          &:hover{
            .nav-title-tool{
              color #FFFFFF;
            }
          }
          svg{
            width 37%;
            fill #8a8a8a;
          }
          .nav-title-tool{
            width 63%;
            font-weight bold;
            font-size 15px;
            color #656767;
          }
        }
      }


      .logo {
        display flex
        flex-flow column
        align-items center


        .divider {
          border-bottom 1px solid #4A4A4A
          width 80%
          height 10px
        }
      }

      .nav-items {
        margin-top: 20px;
        padding-left: 10px;
        padding-right: 10px;

        li {
          margin-bottom 15px

          a {
            color #DADBDC
            background-color #40444A
            border-radius 10px
            width 48px
            height 48px
            display flex
            justify-content center
            align-items center
            cursor pointer

            .el-image {
              border-radius 10px
            }

            .iconfont {
              font-size 20px
            }
          }

          a:hover, a.active {
            color #47fff1
          }

          .title {
            font-size: 12px
            padding-top: 5px
            color: #e5e7eb;
            text-align: center;
          }

          .active {
            color #47fff1
          }
        }
      }
    }

    .content {
      width: 100%;
      box-sizing: border-box;
    }

  }
}
</style>
